<template>
	<view>
		<view class="tv-img tv-img_1" v-if="otherList[0]">
			<image :src="`https:${otherList[0].body.items[0].img_url}`" mode="heightFix" lazy-load></image>
		</view>
		<view class="divider_line"></view>
		<view class="tv-img tv-img_1" v-if="otherList[1]">
			<image :src="`https:${otherList[1].body.items[0].img_url}`" mode="heightFix" lazy-load></image>
		</view>
		<view class="divider_line"></view>
		<view class="tv-item">
			<u-row v-if="productList[0]" :gutter='8'>
				<u-col span="6" v-for="(item,index) in productList[0].body.items" :key="index"
					@click='toShopDetail(item)'>

					<view class="item-img">
						<image :src="item.img_url" mode="widthFix" lazy-load></image>
					</view>
					<view class="info-box">
						<text class="name text-ellipsis">{{item.product_name}}</text>
						<text class="info text-ellipsis">{{item.product_brief}}</text>
						<text class="moneys">¥{{item.show_price}}</text>
						<view class="btn">
							<view class="buybtn">
								立即购买
							</view>
						</view>
					</view>

				</u-col>
			</u-row>
		</view>
		<view class="divider_line"></view>
		<view class="smart-item">
			<u-row v-if="shopList[0]" :gutter='8'>
				<u-col span="4" v-for="(item,index) in shopList[0].body.items" :key="index" @click='toShopDetail(item)'>
					<view class="box-item">
						<view class="item-img">
							<image :src="item.img_url" mode="" lazy-load></image>
						</view>
						<view class="info-box">
							<text class="name text-ellipsis">{{item.product_name}}</text>
							<text class="info text-ellipsis">{{item.product_brief}}</text>
							<text class="moneys">¥{{item.show_price}}</text>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="divider_line"></view>
		<view class="smart-item">
			<u-row v-if="shopList[1]" :gutter='8'>
				<u-col span="4" v-for="(item,index) in shopList[1].body.items" :key="index" @click='toShopDetail(item)'>
					<view class="box-item">
						<view class="item-img">
							<image :src="item.img_url" mode="" lazy-load></image>
						</view>
						<view class="info-box">
							<text class="name text-ellipsis">{{item.product_name}}</text>
							<text class="info text-ellipsis">{{item.product_brief}}</text>
							<text class="moneys">¥{{item.show_price}}</text>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="divider_line"></view>
		<view class="tv-img tv-img_1" v-if="otherList[2]">
			<image :src="`https:${otherList[2].body.items[0].img_url}`" mode="heightFix" lazy-load></image>
		</view>
		<view class="divider_line"></view>
		<view class="tv-img tv-img_1" v-if="otherList[3]">
			<image :src="`https:${otherList[3].body.items[0].img_url}`" mode="heightFix" lazy-load></image>
		</view>
		<view class="divider_line"></view>
		<view class="tv-img tv-img_1" v-if="otherList[4]">
			<image :src="`https:${otherList[4].body.items[0].img_url}`" mode="heightFix" lazy-load></image>
		</view>
		<view class="divider_line"></view>
		<view class="tv-item">
			<u-row v-if="productList[1]" :gutter='8'>
				<u-col span="6" v-for="(item,index) in productList[1].body.items" :key="index"
					@click='toShopDetail(item)'>
					<view class="item-img">
						<image :src="item.img_url" mode="widthFix" lazy-load></image>
					</view>
					<view class="info-box">
						<text class="name text-ellipsis">{{item.product_name}}</text>
						<text class="info text-ellipsis">{{item.product_brief}}</text>
						<text class="moneys">¥{{item.show_price}}</text>
						<view class="btn">
							<view class="buybtn">
								立即购买
							</view>
						</view>
					</view>

				</u-col>
			</u-row>
		</view>
		<view class="divider_line"></view>
		<view class="smart-item">
			<u-row v-if="shopList[2]" :gutter='8'>
				<u-col span="4" v-for="(item,index) in shopList[2].body.items" :key="index" @click='toShopDetail(item)'>
					<view class="box-item">
						<view class="item-img">
							<image :src="item.img_url" mode="" lazy-load></image>
						</view>
						<view class="info-box">
							<text class="name text-ellipsis">{{item.product_name}}</text>
							<text class="info text-ellipsis">{{item.product_brief}}</text>
							<text class="moneys">¥{{item.show_price}}</text>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="divider_line"></view>
		<view class="smart-item">
			<u-row v-if="shopList[3]" :gutter='8'>
				<u-col span="4" v-for="(item,index) in shopList[3].body.items" :key="index" @click='toShopDetail(item)'>
					<view class="box-item">
						<view class="item-img">
							<image :src="item.img_url" mode="" lazy-load></image>
						</view>
						<view class="info-box">
							<text class="name text-ellipsis">{{item.product_name}}</text>
							<text class="info text-ellipsis">{{item.product_brief}}</text>
							<text class="moneys">¥{{item.show_price}}</text>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="divider_line"></view>
		<view class="tv-img tv-img_2" v-if="otherList[5]">
			<image :src="`https:${otherList[5].body.items[0].img_url}`" mode="widthFix" lazy-load></image>
		</view>
		<view class="divider_line"></view>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				shopList: [],
				otherList: [],
				productList: []
			};
		},
		methods: {
			toShopDetail(item) {
				let action = item.action
				if (action.productId && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.productId}`,
						success() {

						}
					})
				} else if (action.path && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.path}`,
						success() {

						}
					})
				}

			},
			fetchData() {
				this.$request.get('/getData', {
					type: 'activity',
					page_id: '19071'
				}).then((res) => {
					let shopList = []
					let otherList = []
					let productList = []
					let data = res.data.data.data.sections
					data.forEach(item => {
						if (item.view_type == 'list_three_type4') {
							shopList.push(item)
						} else if (item.view_type == 'cells_auto_fill') {
							otherList.push(item)
						} else if (item.view_type == 'list_two_type14') {
							productList.push(item)
						}
					})
					this.otherList = otherList
					this.shopList = shopList
					this.productList = productList
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
		},
		mounted() {
			this.fetchData()
		}
	}
</script>

<style lang="scss" scoped>
	.smart-item {
		padding: 0 0.16rem;
		background: rgb(255, 174, 153);

		.box-item {
			width: 2.21rem;
		}

		.item-img {
			width: 2.21rem;
			height: 2.21rem;

			image {
				width: 2.21rem;
				height: 2.21rem;
			}
		}

		.name {
			font-size: .24rem !important;
			padding: 0 0.12rem;
		}

		.info {
			font-size: .2rem !important;
			line-height: 1.6em !important;
		}

		.info-box {
			padding-bottom: 0.2rem;
		}
	}

	.info-box {
		line-height: 1.2;
		padding: 0.2rem 0.1rem;
		text-align: center;
		background: #fff;
		padding-bottom: 0.23rem;
		border-bottom-left-radius: 0.1rem;
		border-bottom-right-radius: 0.1rem;

		.name {
			display: inline-block;
			font-size: .28rem;
			font-weight: bolder;
			color: #3c3c3c;
			width: 100%;
		}

		.info {
			display: inline-block;
			color: #3c3c3c;
			font-size: .2rem;
			line-height: 1.8;
			text-align: center;
			width: 100%;
		}

		.moneys {
			font-weight: 600;
			text-align: center;
			font-family: Heiti SC, STHeiti;
			line-height: 1.2;
			font-size: .28rem;
			color: rgb(245, 75, 75);
		}
	}

	.tv-item {
		padding: 0 0.16rem;
		background: rgb(255, 174, 153);

		.btn {
			.buybtn {
				background-color: rgb(245, 75, 75);
				color: rgb(255, 255, 255);
				padding: 0.1rem 0;
				width: 1.76rem;
			}
		}

		.item-img {
			width: 100%;
			width: 3.38rem;
			height: 3.38rem;

			image {
				width: 100%;
				border-top-left-radius: 0.1rem;
				border-top-right-radius: 0.1rem;
			}
		}

	}

	.tv-img {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.tv-img_1 {
		height: 1.2rem;

		image {
			height: 1.2rem;
		}
	}

	.tv-img_2 {
		height: 0.76rem;

		image {
			height: 0.76rem;
		}
	}

	.divider_line {
		border-bottom: 0.16rem solid rgb(255, 174, 153);
		background-color: rgb(255, 174, 153);
	}
</style>